﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>科大讯飞语音听写</title>
    <style>
        body,html{margin:0;padding:0;font-size:16px;}
        .volume-wrap{width:300px;height:25px;border:1px solid #0000FF;overflow:hidden;}
        .volume-wrap .volume{width:0%;height:100%;background:#FF0000;}
    </style>
</head>
<body>
    <div>
        <audio controls autoplay></audio>
        <input onclick="startRecording()" type="button" value="开始录音" />
        <input onclick="stopRecording()" type="button" value="结束录音并识别" />
        <input onclick="playRecording()" type="button" value="播放" />
        <input onclick="uploadAudio()" type="button" value="提交" />
    </div>
    <div>音量：
        <div class="volume-wrap">
            <div id="volume" class="volume"></div>
        </div>
    </div>
    <div>识别内容：<div id="iat-content"></div></div>
    <!--<div>文件上传：
        <form action="upload.php" method="post" enctype="multipart/form-data">
            <input type="file" name="audioData" /> <button type="submit">提交</button>
        </form></div>-->
    <script type="text/javascript" src="HZRecorder.js"></script>


    <script>

        var recorder;

        var audio = document.querySelector('audio');
        var oVolume=document.getElementById("volume");
        var iatContent=document.getElementById("iat-content");

        function startRecording() {
            HZRecorder.get(function (rec) {
                recorder = rec;
                recorder.start();
            });
        }

        function stopRecording() {
            recorder.stop();
            console.log(recorder)
            uploadAudio();
        }

        function playRecording() {
            recorder.play(audio);
        }
        //上传录制的音频到后端服务器
        function uploadAudio() {
            recorder.upload("https://vueshop.glbuys.com/iatdemo/upload.php", function (state, e) {
            		console.log(state)
                switch (state) {
                    case 'uploading':
                        //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
                        break;
                    case 'ok':
                    	console.log(e)
                    
                        iat(e.target.responseText);
                        //alert("上传成功");
                        break;
                    case 'error':
                        alert("上传失败");
                        break;
                    case 'cancel':
                        alert("上传被取消");
                        break;
                }
            });
        }
        //语音识别
        function iat(data){
            if(data!==''){
                var result=JSON.parse(data);
                if(result.code===200){
                    var fileName=result.data;
                    var ajax = new XMLHttpRequest();
                    ajax.onreadystatechange=function(){
                        if(ajax.status==200 && ajax.readyState==4){
                            //console.log(ajax.responseText);
                            var jsonRes=JSON.parse(ajax.responseText.replace(/success/g,""));
                            if(jsonRes instanceof Object){
                                //console.log(jsonRes);
                                if(jsonRes.code==='0'){
                                    iatContent.innerHTML=jsonRes.data;
                                }
                            }
                        }

                    };
                    ajax.open('get', "https://vueshop.glbuys.com/iatdemo/iat.php?filename="+fileName);
                    ajax.send();
                }else{
                    alert(result.data);
                }
            }

        }

    </script>

</body>
</html>
